<template>
    <div class="container question-icon" v-if="question" label="题目详情">
        <div class="row col-title">
            <div class="col">
                <span>{{ question.ID }}.{{ question.name }}</span>
                <span v-if="question.source" :style="{
        backgroundColor: '#F6F6F6', color: '#8C8C8C', fontSize: '14px', height: '26px', borderRadius: '4px', display: 'inline-block',
        padding: '4px 8px', lineHeight: '18px', transform: 'translateY(-3px)', marginLeft: '12px', fontWeight: 400
    }">{{ question.source }}</span>
            </div>
            <div :style="{ width: '150px', padding: 0, textAlign: 'right' }">
                <el-button v-if="question.range === 'match' && getuser?.uservip?.find(c => c.viplistid === 1)"
                    @click="open1"> <el-icon :size="14">
                        <DocumentCopy />
                    </el-icon>&nbsp;复制为团队题目</el-button>
            </div>
            <div :style="{ width: '150px', padding: 0, textAlign: 'right' }">
                <el-button v-if="question.range === 'match' && getuser?.uservip?.find(c => c.viplistid === 1)"
                    @click="copy"> <el-icon :size="14">
                        <DocumentCopy />
                    </el-icon>&nbsp;复制为我的题目</el-button>
            </div>
            <div :style="{ width: '80px', padding: 0, textAlign: 'right' }">
                <div class="btn-group" role="group" aria-label="First group">
                    <button type="button" class="btn btn-sm" :class="font === 14 ? 'btn-dark' : 'btn-secondary'"
                        @click="font = 14">小</button>
                    <button type="button" class="btn btn-sm" :class="font === 18 ? 'btn-dark' : 'btn-secondary'"
                        @click="font = 18">大</button>
                </div>
            </div>

        </div>
        <div class="row pt-3">
            <div class="col">
                <div class="text-icon">
                    <div class="float-start">
                        <svg style="transform: translateY(-1px)" class="icon" aria-hidden="true">
                            <use xlink:href="#icon-lujing524" />
                        </svg>
                    </div>

                    <div class="text-icon-title1 float-start m-pl-1">难度</div>
                    <div class="text-icon-data float-start">{{ DATAdifficulty[question.difficulty || "1"] }}</div>
                    <span class="clearfix"></span>
                </div>
            </div>
            <div class="col">
                <div class="text-icon">
                    <div class="float-start">
                        <svg style="transform: translateY(-1px)" class="icon" aria-hidden="true">
                            <use xlink:href="#icon-lujing525" />
                        </svg>
                    </div>

                    <div class="text-icon-title float-start m-pl-1">内存</div>
                    <div class="text-icon-data float-start">
                        {{
        question.memorylimit ? Number(question.memorylimit) : 128
    }}MB
                    </div>
                    <span class="clearfix"></span>
                </div>
            </div>
            <div class="col">
                <div class="text-icon">
                    <div class="float-start">
                        <svg style="transform: translateY(-1px)" class="icon" aria-hidden="true">
                            <use xlink:href="#icon-jianqu1" />
                        </svg>
                    </div>

                    <div class="text-icon-title float-start m-pl-1">时间</div>
                    <div class="text-icon-data float-start">{{ question.timelimit ? Number(question.timelimit) : 200
                        }}ms
                    </div>
                    <span class="clearfix"></span>
                </div>
            </div>
        </div>
        <contextlist v-bind="{ question }" :style="{ '--font-size': font + 'px' }"></contextlist>
    </div>
</template>

<script lang="ts" setup>
import { DocumentCopy } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox, ElNotification, ElOption, ElSelect } from 'element-plus';
import { computed, h, ref, watch } from 'vue';
import { useStore } from 'vuex';
import { asynccopyquestion } from '../../../api';
import contextlist from "../../../components/watchquestion/contextlist.vue";
import { Storekey } from '../../../interface';
import Studycodemodel from '../../../mysql_interface/studycodemodel';
import { DATAdifficulty } from "../../data/data";
const questionfont = localStorage.getItem('questionfont')
const font = ref(questionfont ? Number(questionfont) : 14);
const t = defineProps<{ question: Studycodemodel.Iquestion, }>()

const store = useStore(Storekey)
const getuser = computed(() => {
    return store.state.user
})

const team = computed(() => {
    return store.state.team?.rows || []
})

watch(() => font.value, e => {
    localStorage.setItem('questionfont', String(e))
})


const open1 = () => {
    const checked = ref<number>()
    ElMessageBox({
        title: '请选择团队',
        message: () =>
            h(ElSelect, {
                modelValue: checked.value,
                'onUpdate:modelValue': (val: number) => {
                    checked.value = val
                },
            },
                team.value.map(e => {
                    return h(ElOption, {
                        label: e.name,
                        value: Number(e.ID)
                    })
                })
            ),
    }).then((e) => {
        if (!checked.value) {
            ElMessage.error('请选择团队')
            return
        }
        asynccopyquestion({ ID: t.question.ID, teamid: checked.value }).then(c => {
            ElNotification({
                title: '提示',
                message: '该题已复制到【团队题目】，您可以在创建任务、创建比赛时在【团队题目】中找到该题。',
                duration: 0,
            })
        }).catch(f => {
            ElMessage.error(f)
        })
    }).catch(c => {

    })
}

async function copy() {
    ElMessageBox.confirm("复制为我的题目后，您可以在“题目列表-我的题目”中进行查看", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
    }).then(() => {
        asynccopyquestion({ ID: t.question.ID }).then(c => {
            ElNotification({
                title: '提示',
                message: '该题已复制到【我的题目】，您可以在创建任务、创建比赛时在【我的题目】中找到该题。',
                duration: 0,
            })
        }).catch(f => {
            ElMessage.error(f)
        })
    }).catch(c => {

    })

}

</script>

<style scoped>
.question-icon {
    padding-top: 5px;
}

.question-icon .icon-z {
    height: 145px;
    width: 145px;
    display: inline-block;
    margin-right: 10px;
}

.question-icon .icon-t {
    display: inline-block;
    height: 145px;
    width: 125px;
}

.question-icon .card {
    height: 145px;
}

.question-icon .card .card-body {
    padding: 0.25rem;
}

.question-icon .card-img-top {
    height: 52px;
    width: 52px;
    margin: 15px auto;
}

.pic-main {
    max-height: calc(100vh - 184px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 48px;
}


.col-title {
    font-size: var(--size-t1);
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: var(--color-303133);
    margin-top: 20px;
    line-height: 32px;
}

h5 {
    font-size: 18px;
}

.btn-secondary {
    background-color: #f5f5f5;
    color: #000;
    border-color: rgba(117, 117, 117, 0.4)
}
</style>
